<template>
    <view class="warp" :style="themeStyleVar">
        <view :style="{'padding-top':`${navBarConf.titleBarHeight + navBarConf.statusBarHeight}px`}">
            <view class="content">
                <view class="btns">
                    <view class="btn-item martb"  :class="handleShake && 'shake-x-ani'" @click="judgementMessageSwitch">更新订阅</view>
                </view>
                <p class="tips martb">
                    为了及时掌握状态，您是否想接收更新状态的消息提醒？
                </p>
            </view>
            <view>
                <u-modal 
                :show="show" 
                :title="title" 
                :content='tipsContent'
                :confirmText = "confirmText"
                :cancelText="cancelText"
                :showCancelButton = "true"
                @confirm="openSetting"
                @cancel="dontOpenSetting"
                >
                </u-modal>
            </view>
        </view>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
    import {getSubscriptionTemp} from "../../api/tools";

    export default {
        data() {
            return {
                tmplId:[''] ,//NfHmE7DhNsFAj8Lob8Rpk3HnyFqKCap_jQXh0Z-oQdI
                show:false,
                title:'提示',
                tipsContent:'为了及时掌握状态，您是否想接收更新状态的消息提醒？',
                cancelText:'不需要提醒',
                confirmText:'去开启消息提醒',
                handleShake:false
            }
        },
        computed: {
            navBarConf() {
                return this.$store.getters.getNavBarConf
            }, // 获取设备头部安全区和标题高度
            themeStyleVar() {
                return this.$store.getters.getThemeStyleVar
            } // 当前主题色卡变量
        },
        onLoad() {
            getSubscriptionTemp({}).then(res =>{
            	if(res.code == 200) {
                    this.tmplId = res.data
                    //console.log('sub',this.tmplId)
                    //this.subscribe()
            	}
            })
            // #ifdef MP-WEIXIN
            wx.showShareMenu({
              withShareTicket: true,
              menus: ['shareAppMessage', 'shareTimeline']
            })
            // #endif
            
        },
        // #ifdef MP-WEIXIN
        onShareAppMessage(res) {
            if (res.from === 'button') {// 来自页面内分享按钮
              console.log(res.target)
            }
            return {
              title: '给您分享个好工具',
              path: '/pages/tools/subscribe'
            }
        },
        // #endif
        methods: {
            subscribe(){
                let params = {}
                uni.requestSubscribeMessage({
                    tmplIds: this.tmplId,
                    success(res) {
                        //console.log("success", res)
                        //if (res['DDRWpKTCOzvMjXRh32NoKOrZshA_FJQSEe315cuSCEc'] == 'accept') {
                        //    console.log('订阅成功');
                        //}
                    },
                    fail(res){
                       //console.log("fail", res) 
                    }
                })
            },
            // 判断消息订阅总开关是否打开
            judgementMessageSwitch(flag) {
                this.handleShake = true
                setTimeout(()=>{
                    this.handleShake = false
                },500)

                let that = this
                uni.getSetting({
                    withSubscriptions: true,
                    success(res) {
                        if (!res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是关着的，引导用户去打开
                            that.show = true
                        } else { // 如果开着，则继续向下打开弹窗，获取用户授权
                            //if(JSON.stringify(res.subscriptionsSetting).indexOf('NfHmE7DhNsFAj8Lob8Rpk3HnyFqKCap_jQXh0Z-oQdI') != -1){
                              //  console.log("用户选择了“保持以上选择”")
                                //that.checkFlag();
                             //   that.$refs.uToast.show({message:"您有消息选择了“保持以上选择”"})
                             // }
                              //console.log('judgementMessageSwitch')
                              //console.log(res)
                              that.messageSubscription()
                        }
 
                    },
                    fail(res) {
                        that.messageSubscription() // 如果失败，则继续向下打开弹窗，获取用户授权
                    }
                })
            },
 
            // 弹窗点订阅，开启消息订阅提醒
            openSetting() {
                if(this.confirmText == '确定'){
                    this.messageSubscription()
                    return
                }
                var that = this
                uni.openSetting({
                    withSubscriptions: true,
                    complete(res) {
                        uni.getSetting({
                            withSubscriptions: true,
                            success(res) {
                                if (res.subscriptionsSetting.mainSwitch) { // 订阅消息的总开关,如果是开着的
                                    that.tipsContent = '再次点击确定，弹出可订阅列表进行订阅'
                                    that.cancelText = '取消'
                                    that.confirmText = '确定'
                                } else {
                                    that.show = false;
                                }
                            }
                        })
                    }
                })
            },
 
            // 弹窗点不订阅
            dontOpenSetting() {
                this.show = false;
            },
 
            // 订阅申请弹出，只允许点击弹出
            messageSubscription() {
                this.tipsContent= '为了及时掌握订单状态，您是否想接收订单状态的消息提醒？' // 弹框提示内容，
                this.confirmText= '去开启消息提醒'
                this.cancelText= '不需要提醒'
                let that = this
                that.show = false;
                //let tmplId = ['xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] // 模板ID，去小程序后台管理开一个，写进数组里，官方文档也有介绍
                uni.requestSubscribeMessage({
                    tmplIds: that.tmplId,
                    success(res) {
                        if(JSON.stringify(res).indexOf("reject") != -1){
                            console.log("拒绝")
                        } 
                        if(JSON.stringify(res).indexOf("accept") != -1){
                            console.log("接受")
                        }
                        //console.log("success", res)
                        //if (res['xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'] == 'accept') {
                        //	console.log('');
                        //}
                        that.$refs.uToast.show({message:"订阅设置成功"})
                    },
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .warp {
        min-height: 100vh;
        background-color: #FFF;
    }

    .content {
        @include flex-center();
        flex-flow: column;
        padding: 24rpx;
        box-sizing: border-box;
        font-size: $uni-font-size-base;
        border-top: 20rpx solid #F7F7F7;

        .content-item {
            width: 100%;
            background-color: #FFF;
            border-radius: 16rpx;
            padding: 0 24rpx;
            box-sizing: border-box;

            .flex-box {
                display: flex;
                align-items: center;
                flex: 1 auto 1;

                .radio-group {
                    display: flex;
                    justify-content: flex-start;

                    &__item {
                        display: flex;
                        align-items: center;
                        margin-left: 42rpx;

                        .radio {
                            transform: scale(0.75);
                        }
                    }
                }

                .tag-input {
                    margin: 0 auto;
                    padding: 8rpx 20rpx;
                    border-radius: 8rpx;
                    font-size: 28rpx;
                    line-height: 28rpx;
                    color: $uni-color-title;
                    border: 1px solid var(--global-color-100);
                    background-color: #FCFCFC;
                }

            }

        }

        .space-between {
            justify-content: space-between;
        }
    }

    .btns {
        @include flex-center();
        flex-flow: column;
        margin-top: 24rpx;
        width: 100%;

        .btn-item {
            @include flex-center();
            width: 86%;
            height: 80rpx;
            color: #FFF;
            border-radius: 16rpx;
            background-color: var(--global-color-100);
        }
    }

    .tips {
        padding: 0 20rpx;
        box-sizing: border-box;
        line-height: 36rpx;
        font-size: $uni-font-size-sm;
        color: #888;
    }

    .martb {
        margin: 20rpx 0;
    }
    .shake-x-ani{
    		animation: shakeAni 0.5s ease-in-out;
    }
    @keyframes shakeAni {
        10%, 90% { transform: translate3d(-1px, 0, 0); }
        20%, 80% { transform: translate3d(+2px, 0, 0); }
        30%, 70% { transform: translate3d(-4px, 0, 0); }
        40%, 60% { transform: translate3d(+4px, 0, 0); }
        50% { transform: translate3d(-4px, 0, 0); }
    }
</style>